<template>
    <div class="header_operate">
        <div class="header_operate_search">
            <input type="text" v-model="searchContent">
            <router-link class="header_operate_search_img" target="_blank" :to="'/search?kind='+searchContent">
                <img src="/public/img/search_.png" alt="">
            </router-link>
        </div>

        <div style="width: 200px" v-if="!store.state.user">
            <i @click="logRegister(true)">登录</i>
            <span class="header_delimiter">|</span>
            <i @click="logRegister(false)">注册</i>
        </div>

        <div v-else class="header_operate_user_info" @click="userInfo" >
            <img :src="digital.avatar(store.state.user.email)" alt="" title="查看个人信息">
            <span class="header_operate_user_msg" v-show="store.state.commentsSize!==0">{{store.state.commentsSize}}</span>
        </div>

        <img class="topic" :src="topicList[topic].url" @click="handoff(topicList[topic].topic,$event)" alt=""
             :title="'切换为'+topicList[topic].msg">
    </div>
</template>
<!--导航栏登录注册-->
<script setup>
//emit事件
import {onMounted, ref} from "vue";
import store from "@/store/index.js";
import digital from "@/config/methods/digital.js"
import Bubbling from "@/components/publicComponent/Bubbling.vue";

//个人信息下拉列表数据
const item_list = ref([
    {url: "announcement", msg: "公告"},
    {url: "websiteHelp", msg: "帮助"},
]);
const emit = defineEmits(['logRegister']);

//打开登录注册窗口
const logRegister = (item) => {
    emit('logRegister', item);
};

//打开用户信息窗口
const userInfo = () => {
    store.commit('userWindow',true)
};

//搜索框内容
const searchContent = ref('')


//预加载
onMounted(() => {
    //初始化主题
    let initTopic = window.localStorage.getItem("topic");
    if(initTopic){
        topic.value = initTopic==='daytime' ? 1 : 0;
    }

})


//主题图标数据
const topicList = ref([
    {url: "/img/header/daytime.png", topic: "daytime", msg: "白天"},
    {url: "/img/header/night.png", topic: "night", msg: "夜晚"},
]);
//准备切换下一个的主题
const topic = ref(1);
//防止重复点击
const state = ref(false)
//切换主题
const handoff = (item,event) => {
    if (state.value) {
        return;
    }
    event.target.style.visibility = 'hidden';
    window.localStorage.setItem("topic", item);
    store.commit('globalStyles', item);
    store.commit('info_sub', {msg: "主题切换成功！", type: "normal"})
    setTimeout(() => {
        state.value = false;
    }, 2500)
    topic.value = topic.value === 0 ? 1 : 0;
    state.value = true;

    setTimeout(()=>{
        event.target.style. visibility="";
    },100);

}


</script>

<style scoped>
.topic {
    width: 20px;
    margin-left: 50px;
}

.topic {
    opacity: .8;
    animation: topic 1s ease-out 0s 1 forwards ;
}
@keyframes topic {
    0%{
        transform: scale(0);
    }
    30%{
        transform: scale(1.04);
    }
    50%{
        transform: scale(1);
    }
    70%{
        transform: scale(1.03);
    }
    100%{
        transform: scale(1);
    }

}

img {
    object-fit: cover;
}

img:hover, a:hover {
    opacity: .8;
    cursor: pointer;
}

img {

}

a {
    font-size: 14px;
}

.header_operate {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.header_delimiter {
    padding: 0 10px;
}

.header_operate i:hover {
    opacity: .8;
    cursor: pointer;
}

.header_operate_search {
    width: 200px;
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 20px;

}

.header_operate_search input {
    outline: none;
    height: 30px;
    border: 0;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    text-indent: 15px;
    box-shadow: 0 0 3px rgba(96, 97, 98, 0.49);
}

.header_operate_search_img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 30px;
    background: #eea965;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}

.header_operate_search_img img {
    width: 25px;
}

.header_operate_user_info {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    height: 100%;
}
i:hover{
    color: #6da6e1;
}
.header_operate_user_info:hover{
    cursor: pointer;
    text-decoration: underline;
}
.header_operate_user_info img {
    width: 25px;
    height: 25px;
    margin-right: 5px;
}
.header_operate_user_msg{
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%) translateX(50%);
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #e03939;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}
</style>